import React from "react";
import { ChessType } from "../types/enums";
import { ChessComp } from "./ChessComp";
import "./BoardComp.css";

interface IProps {
  chesses: ChessType[];
  onClick?: (index: number) => void;
  isGameOver: boolean;
}

export const BoardComp: React.FC<IProps> = (props: IProps) => {
  // export const BoardComp: FunctionComponent<IProps> = (props: IProps) => {
  const list = props.chesses.map((type, index) => (
    <ChessComp
      type={type}
      key={index}
      onClick={() => !props.isGameOver && props.onClick?.(index)}
    />
  ));
  return <div className="board">{list}</div>;
};
